<template>
  <div>
    <input type="text" v-model="user.id" />
    <input type="text" v-model="user.name" />
    <button @click="handleSubmit">提交</button>
    <ul>
      <li v-for="(item, index) in o.arr" :key="item.id" @click="handleDel(index)">{{ item.name }}</li>
    </ul>
  </div>
</template>
<script>
import { reactive } from 'vue'
const useDel = () => {
  // #1 渲染列表
  const o = reactive({
    arr: [
      {
        id: 0,
        name: 'ifer',
      },
      {
        id: 1,
        name: 'elser',
      },
      {
        id: 2,
        name: 'xxx',
      },
    ],
  })
  // #2 删除功能
  const handleDel = (index) => {
    // 注意一定不要忘记使用 reactive 包装对象，否则对数据的操作不是响应式的
    o.arr.splice(index, 1)
  }
  return { o, handleDel }
}
const useAdd = (o) => {
  // #3 添加
  // #3.1 收集数据
  // 注意要想 v-model 实时收集数据，需要用 reactive 包一下变成响应式的对象
  const user = reactive({
    id: '',
    name: '',
  })
  // #3.2 添加数据
  const handleSubmit = () => {
    // 不要直接添加此对象，否则会相互影响
    // o.arr.push(user)
    o.arr.push({
      ...user,
    })
    /* o.arr.push({
        id: user.id,
        name: user.name,
      }) */
    // 把 user 给空对象，然后通过 newUser 接收
    /* const newUser = Object.assign({}, user)
      o.arr.push(newUser) */
    // 清空原数据
    user.id = ''
    user.name = ''
  }
  return { user, handleSubmit }
}
export default {
  setup() {
    const { o, handleDel } = useDel()
    const { user, handleSubmit } = useAdd(o)
    return {
      o,
      handleDel,
      user,
      handleSubmit,
    }
  },
}
</script>
